<!-- 表单组件点击触发聚焦 在表单外层包裹一层 可以在这层增加工具栏处理该表单组件 例如删除等功能 该组件位于form-item组件外层 -->
<template>
  <div class="form-container" :class="isSelected&&'selected'">
    <!-- slot 插槽用于填充form-item组件 -->
    <slot name="default" ></slot>
    <div class="form-item-tools" v-show="isSelected" >
        <p class="tools-item"><img :src="delPng" @click="delEntity"/></p>     
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted,computed, type PropType} from 'vue'
import delPng from '../assets/imgs/del.png'
import useForm from '../hooks/useForm';
import type BaseEntity from './form-item/components/BaseEntity';
let {curSelectFormComponent,removeEntity,renderConfig}=useForm()
let props= defineProps({
  draggableFormEntity: {
    type: Object as PropType<BaseEntity>,
      default:()=>{}
  },
  parentField:{
    type:Array,
    default:()=>[]
  },
  parentEntity:{
    type: Object as PropType<BaseEntity>,
      default:()=>{}
  }
})
let isSelected=computed(()=>{
  return props.draggableFormEntity.config.field===curSelectFormComponent.value?.config?.field
})

function delEntity(){
  removeEntity(props.draggableFormEntity)
}
</script>
<style scoped lang="less">
@import "../styles/index.less";
.form-container{
  width: 100%;

  // border: 1px solid red;
  position: relative;
}
.form-item-tools{
  height:22px;
  // width: 100%;


  position: absolute;
  bottom: 0px;
  right: 0;
}
.tools-item{
  height: 100%;
  background-color: #1989fa;
  color: white;
  cursor: pointer;
  border-radius: 5px 0px 0px 0px;
  padding: 3px;
  box-sizing: border-box;
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  img{
    height: 100%;
  
  }
}
.selected{
  border: 1px dashed #1989fa !important; 
}
</style>